<template>
  <!-- 服务案例展示--专业分包 -->
  <span style="margin:10px 20px 20px 20px ; font-size:30px;width:80%;font-weight:bold">服务案例展示——专业分包</span>
  <div
    style="width: 80% ; margin-bottom:30px;background-color:white;display:flex;justify-content:flex-start;flex-wrap: wrap;">
    <!-- 以下卡片之后通过循环获得数据渲染 -->
    <a-card class="items" style="width: 24% ;display:flex;margin:3% 3%;">
      <template #cover>
        <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
      </template>
      <a-card-meta title="项目名称3">
        <template #description>项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称</template>
      </a-card-meta>
      <!-- 模态按钮 -->
      <a-button type="primary" @click="showModal" style="background-color:orange;margin-top:10px">查看</a-button>
      <a-modal v-model:open="open" title="案例展示" @ok="hideModal" style="width: 40%;">
        <a-table :columns="columns" :data-source="dataSource"></a-table>
    </a-modal>
    </a-card>

    <a-card class="items" style="width: 24% ;display:flex;margin:3% 3%;">
      <template #cover>
        <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
      </template>
      <a-card-meta title="项目名称3">
        <template #description>项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称</template>
      </a-card-meta>
      <a-button type="primary" style="background-color:orange;margin-top:10px">查看</a-button>
    </a-card>

    <a-card class="items" style="width: 24% ;display:flex;margin:3% 3%;">
      <template #cover>
        <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
      </template>
      <a-card-meta title="项目名称3">
        <template #description>项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称</template>
      </a-card-meta>
      <a-button type="primary" style="background-color:orange;margin-top:10px">查看</a-button>
    </a-card>

    <a-card class="items" style="width: 24% ;display:flex;margin:3% 3%;">
      <template #cover>
        <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
      </template>
      <a-card-meta title="项目名称3">
        <template #description>项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称</template>
      </a-card-meta>
      <a-button type="primary" style="background-color:orange;margin-top:10px">查看</a-button>
    </a-card>

    <a-card class="items" style="width: 24% ;display:flex;margin:3% 3%;">
      <template #cover>
        <img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />
      </template>
      <a-card-meta title="项目名称3">
        <template #description>项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称项目名称</template>
      </a-card-meta>
      <a-button type="primary" style="background-color:orange;margin-top:10px">查看</a-button>
    </a-card>


  </div>
</template>

<script lang="ts" setup>
interface DataItem {
  title: string;
}
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { ref, createVNode } from 'vue';
import { Modal } from 'ant-design-vue';
const open = ref<boolean>(false);

const showModal = () => {
  open.value = true;
};
const hideModal = () => {
  open.value = false;
};
const data: DataItem[] = [
  {
    title: 'Ant Design Title 1',
  },
  {
    title: 'Ant Design Title 2',
  },
  {
    title: 'Ant Design Title 3',
  },
  {
    title: 'Ant Design Title 4',
  },
];
const columns = [
      {
        title: '序号',
        dataIndex: 'column1'
      },
      {
        title: '汇总内容',
        dataIndex: 'column2'
      },
      {
        title: '金额：（元）',
        dataIndex: 'column3'
      },
      {
        title: '其中：暂估价（元）',
        dataIndex: 'column4'
      },
      
    ];

    const originalData = [
      { key: '1', column1: '-', column2: '分布分项工程和单价措施项目', column3: '1234', column4: '采购' },
      { key: '2', column1: '1', column2: '其中：人工费', column3: '1000.00', column4: '采购'},
    ];

    const dataSource = ref([...originalData]);

</script>

<style lang="scss" scoped>
.item {
  flex: 1;
  width: calc((80% - 6%) / 3);
  min-width: calc((80% - 6%) / 3);
  max-width: calc((80% - 6%) / 3);

}
</style>